<template>
  <div class="profile">
    <van-nav-bar title="个人中心" />
    <div class="user-info-box">
      <div class="info-top flex flex-align-center flex-content-end">
        <!-- <van-icon name="setting-o" @click="navigate('/setting')" />
        <van-icon name="gold-coin-o" @click="navigate('/withdraw')" /> -->
      </div>
      <div class="info-center">
        <div class="user-name">{{ user.nickname }}</div>
        <div class="user-other-info flex flex-align-center">
          ID：{{ user.uid }}
          <van-divider vertical :style="{ borderColor: '#D9D9D9' }" />
          积分：<span @click="navigate('/withdraw')"  style="font-size:.16rem; color: #ed4559">{{ account.balance }}</span>
        </div>
      </div>
      <div
        class="share flex flex-content-between flex-align-center"
        @click="navigate('/share')" 
       
      >
        <div class="share-left flex flex-center"><img src="../assets/share.png" />邀请好友</div>
        <div class="share-right flex flex-center">前往邀请</div>
      </div>
    </div>
    <div class="cell-list">
      <van-cell-group inset>
        <van-cell title="我的订单" icon="todo-list" is-link @click="navigate('/order')" />
        <van-cell title="积分明细" icon="wap-nav" is-link @click="navigate('/integral')" />
        <!-- <van-cell
          title="联系客服"
          icon="audio"
          is-link
          @click="showDialog({ message: `${tpInfo}` }).then(() => {})"
        /> -->
        <van-cell title="我的团队" icon="friends" is-link @click="navigate('/team')" />
        <van-cell title="意见反馈" icon="question" is-link @click="navigate('/suggest')" />
        <van-cell title="我的钱包" icon="gold-coin" is-link @click="navigate('/withdraw')" />
        <van-cell title="设置中心" icon="setting" is-link @click="navigate('/setting')" />
      </van-cell-group>
    </div>
  </div>
</template>
<script lang="ts" name="ChildView" setup>
import { showDialog, showNotify } from 'vant'
// import Clipboard from 'clipboard'
// const clipboard = new Clipboard('#copy-btn') // .copy-btn为按钮元素的class名称或选择器
let copy_text : any = ref("")
// clipboard.on('success', (e) => {
//   showNotify({type: 'success', message: `邀请链接已成功复制到剪贴板！\n${copy_text.value}`});
//   e.clearSelection() // 清除选中文本
// })
// clipboard.on('error', () => {
//   console.warn('无法复制到剪贴板！')
// })


import { useRouter } from 'vue-router'
import { inject, ref } from 'vue'
import { getCurrentInstance } from '@vue/runtime-core'
const router = useRouter()
const $ajax: any = inject('$ajax')
const $api: any = inject('$api')
const currentInstance: any = getCurrentInstance()
const $this = currentInstance.proxy
// import { changeNum } from '@/store'
// import { storeToRefs } from 'pinia'
// const store = changeNum()
// const { num } = storeToRefs(store)
// const clickChange = () => {
//   let random = Math.floor(Math.random() * 10 + 1)
//   store.CHANGE_COUNT(random)
// }
//用户信息
let user: any = ref({})
let tpInfo: any = ref({})
let personal_count: any = ref({})
let account: any = ref({})
async function get_detail() {
  const data = await $ajax({
    api: $api.detail
  })
  user.value = data.data.userInfo
  tpInfo.value = data.data.tpInfo
  account.value = data.data.account
  personal_count.value = data.data.personalCount
  copy_text.value = location.href.replace('profile', `register?invitedCode=${user.value.inCode}`)
}

get_detail()
const navigate = (path: any) => {
  router.push(path)
}
</script>

<style lang="less" scoped>
.profile {
  background: #e2eeff;
  min-height: 100%;
  font-size: 0.16rem;
  padding: 0.16rem;
  padding-top: 0;

  :deep(.van-nav-bar) {
    background: #e2eeff;
    font-family: 'PingFang SC';
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .user-info-box {
    height: 1.77rem;
    margin-top: 0.2rem;
    border-radius: 0.08rem;
    overflow: hidden;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    padding: 0.16rem;

    &::before {
      content: '';
      width: 0.5rem;
      height: 0.5rem;
      display: inline-block;
      position: absolute;
      background: url(../assets/photo.svg) center no-repeat;
      background-size: contain;
      margin-top: -0.39rem;
      z-index: 999;
      border-radius: 0.25rem;
      margin-left: 0.04rem;
    }

    .info-top {
      height: 0.2rem;

      :deep(.van-icon) {
        margin-left: 0.1rem;
        font-size: 0.18rem;
        color: #333333;
      }
    }

    .info-center {
      padding-left: 0.12rem;

      .user-name {
        color: #000;
        font-family: 'PingFang SC';
        font-size: 0.18rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }

      .user-other-info {
        color: #777;
        font-family: 'PingFang SC';
        font-size: 0.13rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-top: 0.06rem;
      }
    }

    .share {
      height: 0.6rem;
      margin-top: 0.14rem;
      fill: #fdf1f0;
      stroke-width: 2px;
      stroke: #ffdedc;
      border-radius: 0.06rem;
      background: url(../assets/share-bg.svg) center no-repeat;
      background-size: 100%;
      padding: 0 0.24rem;

      .share-left {
        color: #222;

        font-family: zihun100hao-fangfangxianfengti;
        font-size: 0.16rem;
        font-style: normal;
        font-weight: 600;
        line-height: normal;

        img {
          width: 0.28rem;
          height: 0.28rem;
          margin-right: 0.08rem;
        }
      }

      .share-right {
        width: 0.65rem;
        height: 0.24rem;
        color: #fff;
        font-family: 'PingFang SC';
        font-size: 0.12rem;
        font-style: normal;
        font-weight: 400;
        border-radius: 0.5rem;
        background: linear-gradient(90deg, #ed8c62 -7.79%, #ed4559 104.43%);
      }
    }
  }

  .cell-list {
    margin-top: 0.16rem;

    :deep(.van-cell-group--inset) {
      margin: 0;
      --van-cell-line-height: 0.32rem;

      .van-cell {
        // line-height: .24rem;
        &:after {
          border-bottom-color: #e2eeff;
        }

        .van-cell__left-icon {
          color: #628cff;
          font-size: 0.17rem;
          margin-right: 0.08rem;
        }

        .van-cell__right-icon {
          font-size: 0.13rem;
        }
      }
    }
  }
}
</style>
